<template>
  <div class="reader">
    <div class="title">欢迎使用electron阅读器调用测试版本</div>
    <div class="roader-content">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-input size="mini" placeholder="请输入IP地址" v-model="reader.ip"></el-input>
        </el-col>
        <el-col :span="8">
          <el-select size="mini" placeholder="请选择天线" multiple v-model="reader.antenna">
            <el-option
              v-for="item in antenna"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select size="mini" placeholder="请选择功率" v-model="reader.power">
            <el-option
              v-for="item in power"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            size="mini"
            @click="connect"
            :class="{discon:button.connect.state==1}"
          >{{button.connect.title}}</el-button>
        </el-col>
      </el-row>
      <el-row>
        <div class="output" id="message">
          <!--eslint-disable-next-line-->
          <div v-for="item in message">{{item}}</div>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
const ipc = require("electron").ipcRenderer;
import utils from "../../common/utils.js";
export default {
  name: "reader",
  data() {
    return {
      antenna: [
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" }
      ],
      power: [
        { value: 20, label: "20" },
        { value: 20.5, label: "20.5" },
        { value: 30, label: "30" },
        { value: 30.5, label: "30.5" },
        { value: 40, label: "40" },
        { value: 40.5, label: "40.5" }
      ],
      button: {
        connect: {
          title: "连接并扫描",
          state: 0
        }
      },
      reader: {
        ip: "",
        antenna: [],
        power: undefined
      },
      message: []
    };
  },
  mounted() {
    let _this = this;
    let date = new Date();
    ipc.on("asynchronous-reply", function(event, arg) {
      let msg = "[" + date.toLocaleString() + "] ";
      switch (arg.code) {
        case utils.ipcCode.reader.connectSuccess:
          _this.message.push((msg += arg.msg));
          _this.button.connect.title = "断开连接";
          _this.button.connect.state = 1;
          break;
        case utils.ipcCode.reader.startScanResult:
          _this.message.push((msg += arg.data));
          break;
        case utils.ipcCode.reader.disconConnectSuccess:
          _this.message.push((msg += arg.msg));
          _this.button.connect.title = "连接并扫描";
          _this.button.connect.state = 0;
          _this.message=[];
          break;
        default:
          _this.message.push((msg += arg.msg));
          break;
      }
      _this.$nextTick(function() {
        let message = document.getElementById("message");
        message.scrollTop = message.scrollHeight;
      });
    });
  },
  methods: {
    connect() {
      let _this = this;
      let date = new Date();
      let msg = "[" + date.toLocaleString() + "] ";
      if (_this.button.connect.state == 0) {
        //尝试连接阅读器
        if (_this.reader.ip == undefined || _this.reader.ip == "") {
          msg += "请输入IP地址！";
          _this.message.push(msg);
        } else if (_this.reader.antenna.length == 0) {
          msg += "请选择天线！";
          _this.message.push(msg);
        } else if (_this.reader.power == undefined) {
          msg += "请选择功率！";
          _this.message.push(msg);
        } else {
          ipc.send("asynchronous-message", {
            code: utils.ipcCode.reader.connect,
            msg: "连接阅读器",
            data: _this.reader
          });
        }
      } else {
        //尝试断开阅读器
        ipc.send("asynchronous-message", {
          code: utils.ipcCode.reader.disconConnect,
          msg: "断开阅读器",
          data: _this.reader
        });
      }
      this.$nextTick(function() {
        let message = document.getElementById("message");
        message.scrollTop = message.scrollHeight;
      });
    }
  }
};
</script>
<style scoped>
.reader {
  background-color: #000;
  width: 100%;
  height: 100%;
  color: #fff;
}
.reader .title {
  text-align: center;
  padding: 10px;
}
.roader-content {
  padding: 5px 20px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.roader-content .output {
  text-align: left;
  margin-top: 20px;
  height: 400px;
  overflow-y: auto;
  border: 1px solid #fff;
  padding: 0 5px;
}
.roader-content .discon {
  background: #f90303;
  border-color: #f90303;
}
</style>
